<template>
    <div class="layout">
        <Row type="flex">
            <ICol span="3" class="layout-menu-left">
                <div class="layout-logo-left"></div>
                <IMenu name="left" ref="leftmenu" theme="dark" width="auto " accordion :active-name="itemActive"  :open-names="openNames" @on-select="changeItem">
                    <!--系统配置-->
                    <IMenuItem v-show="display.config && $store.getters.per.config_permission_view" name="/config/permission"><Icon type="android-hand"></Icon>权限管理</IMenuItem>
                    <IMenuItem v-show="display.config && $store.getters.per.config_role_view" name="/config/role"><Icon type="person-stalker"></Icon>角色管理</IMenuItem>
                    <IMenuItem v-show="display.config && $store.getters.per.config_admin_view" name="/config/admin"><Icon type="person"></Icon>后台用户管理</IMenuItem>
                    <IMenuItem v-show="display.config && $store.getters.per.config_config_view"  name="/config/config"><Icon type="settings"></Icon>公共配置</IMenuItem>
                    <IMenuItem v-show="display.config && $store.getters.per.config_smstpl_view" name="/config/smstpl"><Icon type="android-textsms"></Icon>短信模版</IMenuItem>
                    <Submenu v-show="display.config && $store.getters.per.config_record_view"  name="/config/record">
                        <template slot="title"> <Icon type="folder"></Icon> 记录</template>
                        <IMenuItem  v-show="$store.getters.per.config_record_sms_view" name="/config/record/sms">短信</IMenuItem>
                        <IMenuItem  v-show="$store.getters.per.config_record_systemlog_view" name="/config/record/systemlog">系统日志</IMenuItem>
                    </Submenu>
                    <IMenuItem v-show="display.config && $store.getters.per.config_category_view" name="/config/category"><Icon type="navicon-round"></Icon>分类</IMenuItem>
                    <IMenuItem v-show="display.config && $store.getters.per.config_banner_view" name="/config/banner"><Icon type="images"></Icon>横幅广告</IMenuItem>
                    <IMenuItem v-show="display.person && $store.getters.per.person_person_view" name="/person/person"><Icon type="person"></Icon>用户列表</IMenuItem>
                    <!--微信引擎-->
                    <Submenu v-show="display.wechat && $store.getters.per.wechat_function_view" name="/wechat/function" >
                        <template slot="title"><Icon type="navicon-round"></Icon>功能 </template>
                        <IMenuItem v-show="$store.getters.per.wechat_function_reply_view" name="/wechat/function/reply">自动回复</IMenuItem>
                        <IMenuItem v-show="$store.getters.per.wechat_function_menu_view" name="/wechat/function/menu">自定义菜单</IMenuItem>
                        <IMenuItem v-show="$store.getters.per.wechat_function_tplmsg_view" name="/wechat/function/tplmsg">模版消息</IMenuItem>
                        <IMenuItem v-show="$store.getters.per.wechat_function_customer_view" name="/wechat/function/customer">客服功能</IMenuItem>
                    </Submenu>
                    <Submenu v-show="display.wechat && $store.getters.per.wechat_manager_view" name="/wechat/manager" >
                        <template slot="title"><Icon type="ios-list"></Icon>管理 </template>
                        <IMenuItem v-show="$store.getters.per.wechat_manager_material_view" name="/wechat/manager/material">素材管理</IMenuItem>
                        <IMenuItem v-show="$store.getters.per.wechat_manager_user_view" name="/wechat/manager/user">微信用户</IMenuItem>
                    </Submenu >
                </IMenu>
            </ICol>
            <ICol span="21">
                <div class="layout-header">
                    <IMenu ref="topmenu" mode="horizontal" theme="dark" :active-name="ModuleActive" @on-select="changeModule">
                        <IMenuItem name="person" v-show="$store.getters.per.person_view"><Icon type="person"></Icon>用户中心</IMenuItem>
                        <IMenuItem name="config" v-show="$store.getters.per.config_view"><Icon type="settings"></Icon>系统配置</IMenuItem>
                        <IMenuItem name="wechat"><Icon type="chatbubbles"></Icon>微信引擎</IMenuItem>
                        <Dropdown class="f-r m-r-10 coltrol" placement="bottom-end" @on-click="control">
                            <a class="c-w" href="javascript:void(0)">操作&nbsp;&nbsp;<Icon type="arrow-down-b"></Icon></a>
                            <DropdownMenu slot="list" >
                                <DropdownItem name="password">密码重置</DropdownItem>
                                <DropdownItem name="logout">退出</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </IMenu>
                </div>
                <router-view></router-view>
                <div class="layout-copy">
                    2016-2017 &copy; Nikolatesfei
                </div>
            </ICol>
        </Row>
        <Password ref="passowrd"></Password>
    </div>
</template>
<script>
    import {Row,Col} from 'iview/src/components/grid'
    import Menu from 'iview/src/components/menu'
    import Icon from 'iview/src/components/icon'
    import Dropdown from 'iview/src/components/dropdown'
    import BackTop from 'iview/src/components/back-top'

    import Axios from 'admin/config/axios'
    import Password from 'admin/components/password'

    export default {
        components:{
            Row,
            'ICol':Col,
            Icon,
            'IMenu':Menu,
            'MenuGroup' : Menu.Group,
            'IMenuItem':Menu.Item,
            'Submenu' : Menu.Sub,
            Dropdown,
            'DropdownMenu' : Dropdown.Menu,
            'DropdownItem' : Dropdown.Item,
            Password,
            BackTop
        },
        data () {
            return {
                ModuleActive: '',
                itemActive: '',
                display:{
                    config : false,
                    person : false,
                    wechat : false,
                },
                openNames:[],
            }
        },
        methods:{
            //菜单改变
            changeModule(name){
                for(var m in this.display){
                    this.display[m] = false;
                }
                this.display[name]= true;
            },
            changeItem(name){
                this.$router.push(name);
            },
            //右侧控制
            control(name){
                if(name=='logout'){
                    Axios.Logout()
                    .then(res=>{
                        window.location.href="/login";
                    })
                }
                if(name=='password'){
                    this.$refs['passowrd'].modal = true;
                }
            },
            //菜单状态改变
            menuStatus(){
                var path = document.location.href.split('?')[0].split('#/'),
                pathArr = path.length==1 ? new Array() : path[1].split('/'),
                module  = pathArr[0] !=undefined ? pathArr[0] : '',
                item    = pathArr[1]!=undefined ? pathArr[1] : '',
                child   = pathArr[2]!=undefined ? pathArr[2] : '';
                //设置当前模块菜单栏的选中或打开的菜单
                this.ModuleActive = module;
                var activeitem = '/'+module+'/'+item;
                var action = {'update':true,'view':true};
                //不在操作页面表明当前路由是三级
                if(child!='' && !action[child]){
                    activeitem +=  '/'+child;
                }
                this.itemActive = activeitem;
                this.openNames = new Array('/'+module+'/'+item);
                this.display[module]= true;

                this.$nextTick(function() {
                    this.$refs.leftmenu.updateOpened();
                    this.$refs.leftmenu.updateActiveName();
                    this.$refs.topmenu.updateOpened();
                    this.$refs.topmenu.updateActiveName();
                })
            }
        },
        beforeCreate: function () {
            //获取当前用户权限列表
            this.$store.dispatch('SETPER');
        },
        created: function () {
            this.menuStatus();
        },
    }
</script>